import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { SecondHeaderC, TableC } from '../../../../../comps';
import _ from 'lodash';

class TopTenHold extends PureComponent {
  constructor() {
    super();
    this.state = {
      topN: 10, // 数量N
      columnsN: [], // 前N大重仓列
      dataSourceN: [], // 前N大重仓数据
      currentPage: 1,
      numInPage: 1000,
      zqfz: '0', // 证券负债 0-占比为负，1：占比为正
    };
  }

  componentDidMount() {
    const { searchData } = this.props;
    this.props.onRef(this);
    this.getData(searchData);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    const { searchData } = nextProps;
    if (JSON.stringify(searchData) !== JSON.stringify(this.props.searchData)) {
      this.getData(searchData);
    }
  }

  // 父组件调用，改变查询条件时重新查询
  changeData = (args) => {
    this.setState(
      {
        zqfz: args?.zqfz || '0',
      },
      () => {
        const { searchData } = this.props;
        this.getData(searchData);
      },
    );
  };

  //获取数据
  getData = (searchData) => {
    const { currentPage, numInPage, topN, zqfz } = this.state;
    this.props.dispatch({
      type: 'assetAllocationCM/queryMarkeData',
      payload: {
        ...searchData,
        topN: topN,
        zqfz: zqfz,
        currentPage: currentPage,
        numInPage: numInPage,
      },
      callback: (data) => {
        if (data && data.biggest_zqzc.dataSource.length && data.biggest_zqzc.columns.length) {
          const columnssN = this.changeColumnsN(data.biggest_zqzc.columns);
          this.setState({
            columnsN: columnssN,
            dataSourceN: data.biggest_zqzc.dataSource,
          });
        } else {
          this.setState({
            columnsN: [],
            dataSourceN: [],
          });
        }
      },
    });
  };

  //优化表格样式
  changeColumnsN = (columns) => {
    columns.forEach((value, index) => {
      if (value.key == 'holdAmount') {
        value.type = 'money';
        value['width'] = '20%';
      }
      if (value.key == 'holdRatio') {
        value['type'] = 'rate';
      }
      if (value.key == 'assetType' || value.key == 'holdRatio') {
        value['width'] = '15%';
      }
      //'交易属性
      if (value.key == 'TRDATTR') {
        let arr = [
          { value: 'B', title: '多头' },
          { value: 'PT', title: '普通' },
          { value: 'S', title: '空头' },
          { value: 'XY', title: '信用' },
        ];
        value.render = (text, record) => {
          let e = arr.filter((item) => {
            return item.value == text;
          });
          if (e && e.length > 0) {
            return e[0].title;
          } else {
            return '';
          }
        };
      }
    });
    return columns;
  };

  //搜索
  searchData = () => {
    this.setState({}, this.getData(this.props.searchData));
  };
  render() {
    const { columnsN, dataSourceN } = this.state;
    const { colorType } = this.props;

    return (
      <div style={{ width: '100%' }}>
        <SecondHeaderC title='前10大重仓' colorType={colorType} />
        <TableC columns={columnsN} dataSource={dataSourceN} rowKey='id' hidePage={true} colorType={colorType} />
      </div>
    );
  }
}
export default connect(({ assetAllocationCM, loading }) => ({
  assetAllocationCM,
  loading: loading.effects['assetAllocationCM/queryMarkeData'],
}))(TopTenHold);
